<template>
  <Card>
    <p slot="title">高危化工品单位安全情况</p>
    <div class="chart" id="chart-chemistry-transport"></div>
    <Divider />
    <span class="text">总体告警率：{{percentage}}%</span>
    <Spin v-show="loading" fix size="large" />
  </Card>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      percentage: 0,
      option: null,
      loading: false
    };
  },
  methods: {
   renderChart() {
      this.loading = true;
      this.option = {
        legend: {
          data: ["运输中","空闲中","装载中","卸货中"],
          left: "center",
          top: "top",
          orient: "horizontal"
        },
        color: [this.COLORS[4], this.COLORS[2],this.COLORS[6], this.COLORS[5]],
        series: [
          {
            type: "pie",
            radius: ["35%", "50%"],
            center: ["50%", "50%"],
            itemStyle: {
              normal: {
                shadowColor: "#00000020",
                shadowBlur: 12,
                shadowOffsetX: 0,
                shadowOffsetY: 5
              }
            },
            label: {
              normal: {
                show: true,
                position: "outisde",
                formatter: "{b}:\n{c}辆"
              }
            },
            data: [
              { name: "运输中", value: 0 },
              { name: "空闲中", value: 0 },
              { name: "装载中", value: 0 },
              { name: "卸货中", value: 0 }
            ]
          }
        ]
      };
      this.$Crender("chart-chemistry-transport", this.option);
      this.loading = false;
    }
  },
  mounted() {
      this.renderChart()
  },
};
</script>

<style scoped>
.chart{
    height:410px;
}
</style>
